<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}{{ meta.title|default }}{{ meta.title_suffix ?? ' - Symfony UX' }}{% endblock %}</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="color-scheme" content="dark light">
        <meta name="view-transition" content="same-origin" />
        <link rel="icon" href="/favicon.ico" sizes="48x48">
        <link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml">
        <link rel="apple-touch-icon" href="/apple-touch-icon.png">
        <link rel="manifest" href="/site.webmanifest">
        <link rel="mask-icon" href="https://symfony.com/favicons/safari-pinned-tab.svg" color="#5bbad5">

        {% block stylesheets %}
        {% endblock %}

        {% block meta %}
            {{ include('_meta.html.twig', {meta: meta|default}) }}
        {% endblock %}

        {% block javascripts %}
            <script>
              const theme = localStorage.getItem('user-theme') || (window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark');
              document.documentElement.setAttribute('data-bs-theme', theme === 'light' ? 'light' : 'dark');
            </script>
            {% block importmap %}
                <script>
                    if (!(HTMLScriptElement && HTMLScriptElement.supports?.('importmap'))) {
                        document.head.appendChild(Object.assign(document.createElement("script"),{
                            src:"https://cdn.jsdelivr.net/npm/es-module-shims@1.8.2/dist/es-module-shims.min.js",
                            async:true,
                        }));
                    }
                </script>
                {{ importmap('app') }}
            {% endblock %}
        {% endblock %}
    </head>
    <body>
        {% block body %}
            <div class="App">
                {% block header %}
                    {{ include('_header.html.twig') }}
                {% endblock %}

                {% block main %}
                    <main>
                        {% block content %}
                        {% endblock %}
                    </main>
                {% endblock %}

                {% block aside %}{% endblock %}

                {% block footer %}
                    {{ include('_footer.html.twig') }}
                {% endblock %}
            </div>
        {% endblock %}
    </body>
</html>
